<template>
  <div class="test">
    <el-input v-model="input" placeholder="input number between 1 to 10" type="number">
      <template #append>
        <el-button type="primary" @click="fetchList">vue2 fetch {{ now }}</el-button>
      </template>
    </el-input>
    <ul>
      <li v-for="obj in list">{{ obj.email}}</li>
    </ul>
  </div>
</template>

<script>
import * as dayjs from 'dayjs'
import axios from 'axios'
// import Header from '@src/components/Header.vue'
export default {
  components: {
    // Header
  },
  // props: ['title'],
  data () {
    return {
      input: '',
      list: []
    }
  },
  computed: {
    now() {
      return dayjs().format('YYYY-MM-DD HH:mm:ss')
    }
  },
  watch: {
    input: {
    handler(newVal, oldVal) {
      console.log('newVal:',newVal)
    },
    immediate: true
  }
  },
  created () {
    this.fetchList()
  },
  methods: {
    async fetchList() {
      const res = this.input > 10 ? 10 : this.input
      const { data } = await axios.get(`https://randomuser.me/api/?results=${res || 5}`)
      this.list = data.results
    }
  }
}
</script>

<style lang="less" scoped>
.test {}
</style>